<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Star, ShoppingCart, ArrowLeft } from '@element-plus/icons-vue'
import ShoppingCartComponent from '@/components/ShoppingCart.vue'
import { detail } from '@/api'

const route = useRoute()
const router = useRouter()

// 商品ID
const productId = ref(route.params.id)

// 商品详情数据
const product = ref(null)

// 评论列表
const comments = ref([])

// 新评论内容
const newComment = ref('')

// 购物车组件引用
const shoppingCartRef = ref(null)

// 购物车抽屉可见性
const cartDrawerVisible = ref(false)

// 当前选中的商品图片索引
const currentImageIndex = ref(0)

// 模拟商品图片列表
const productImages = ref([
  'https://via.placeholder.com/600x600?text=Product1',
  'https://via.placeholder.com/600x600?text=Product2',
  'https://via.placeholder.com/600x600?text=Product3',
  'https://via.placeholder.com/600x600?text=Product4'
])

// 加载商品详情
const loadProductDetail = () => {

  detail({
    productId: productId.value
  }).then(res => {
    product.value = res.data.data.produceDetail
  })

  // 模拟商品数据
  product.value = {
    id: productId.value,
    name: 'Air Jordan 1',
    brand: 'Nike',
    price: 1299,
    originalPrice: 1499,
    rating: 4.8,
    sales: 1200,
    description: '这是一款经典的Air Jordan 1篮球鞋，采用优质皮革材质，搭配经典配色，穿着舒适，是球鞋爱好者的必备之选。',
    specifications: {
      material: '真皮',
      sole: 'rubber',
      closure: '系带',
      style: '高帮'
    },
    sizes: [36, 37, 38, 39, 40, 41, 42, 43, 44, 45]
  }
}

// 加载评论列表
const loadComments = () => {
  // 模拟评论数据
  comments.value = [
    {
      id: 1,
      userId: 'user1',
      username: '张三',
      avatar: 'https://via.placeholder.com/40',
      content: '鞋子质量很好，穿着很舒服',
      rating: 5,
      purchaseTime: '2024-01-15',
      commentTime: '2024-01-20'
    },
    {
      id: 2,
      userId: 'user2',
      username: '李四',
      avatar: 'https://via.placeholder.com/40',
      content: '做工精细，值得购买',
      rating: 4,
      purchaseTime: '2024-01-10',
      commentTime: '2024-01-18'
    }
  ].sort((a, b) => new Date(b.commentTime) - new Date(a.commentTime))
}

// 提交评论
const submitComment = () => {
  if (!newComment.value.trim()) {
    ElMessage.warning('请输入评论内容')
    return
  }
  
  // 模拟提交评论
  const comment = {
    id: comments.value.length + 1,
    userId: 'currentUser',
    username: '当前用户',
    avatar: 'https://via.placeholder.com/40',
    content: newComment.value,
    rating: 5,
    purchaseTime: new Date().toISOString().split('T')[0],
    commentTime: new Date().toISOString().split('T')[0]
  }
  
  comments.value.unshift(comment)
  newComment.value = ''
  ElMessage.success('评论成功')
}

// 添加到购物车
const addToCart = () => {
  if (shoppingCartRef.value && shoppingCartRef.value.addProduct) {
    shoppingCartRef.value.addProduct(product.value)
  } else {
    ElMessage.warning('购物车组件未加载')
  }
}

// 切换商品图片
const changeImage = (index) => {
  currentImageIndex.value = index
}

onMounted(() => {
  loadProductDetail()
  loadComments()
})

// 返回上一页
const goBack = () => {
  router.push('/user')
}
</script>

<template>
  <div class="product-detail" v-if="product">
    <div class="container">
      <!-- 商品展示区 -->
      <div class="product-showcase">
        <div class="product-images">
          <div class="main-image">
            <img :src="productImages[currentImageIndex]" :alt="product.name" />
          </div>
          <div class="thumbnail-list">
            <div
              v-for="(image, index) in productImages"
              :key="index"
              class="thumbnail"
              :class="{ active: currentImageIndex === index }"
              @click="changeImage(index)"
            >
              <img :src="image" :alt="`${product.name}-${index + 1}`" />
            </div>
          </div>
        </div>
        
        <div class="product-info">
          <h1 class="product-name">{{ product.name }}</h1>
          <p class="product-brand">品牌：{{ product.brand }}</p>
          
          <div class="product-price">
            <span class="current-price">¥{{ product.price }}</span>
            <span class="original-price">¥{{ product.originalPrice }}</span>
          </div>
          
          <div class="product-rating">
            <span class="rating">
              <el-icon><Star /></el-icon>
              {{ product.rating }}
            </span>
            <span class="sales">销量：{{ product.sales }}</span>
          </div>
          
          <div class="product-sizes">
            <h3>可选尺码</h3>
            <div class="size-list">
              <el-tag
                v-for="size in product.sizes"
                :key="size"
                class="size-tag"
              >
                {{ size }}
              </el-tag>
            </div>
          </div>
          
          <div class="product-actions">
            <el-button type="primary" size="large" @click="addToCart">
              <el-icon><ShoppingCart /></el-icon>
              加入购物车
            </el-button>
          </div>
        </div>
      </div>
      
      <!-- 商品详情区 -->
      <div class="product-details">
        <h2>商品详情</h2>
        <p class="description">{{ product.description }}</p>
        
        <h3>规格参数</h3>
        <ul class="specifications">
          <li v-for="(value, key) in product.specifications" :key="key">
            <span class="spec-label">{{ key }}：</span>
            <span class="spec-value">{{ value }}</span>
          </li>
        </ul>
      </div>
      
      <!-- 评论区 -->
      <div class="comments-section">
        <h2>商品评论</h2>
        
        <!-- 评论输入框 -->
        <div class="comment-input">
          <el-input
            v-model="newComment"
            type="textarea"
            :rows="3"
            placeholder="分享你的购买体验"
          />
          <el-button type="primary" @click="submitComment">发表评论</el-button>
        </div>
        
        <!-- 评论列表 -->
        <div class="comment-list">
          <div v-for="comment in comments" :key="comment.id" class="comment-item">
            <div class="comment-header">
              <img :src="comment.avatar" :alt="comment.username" class="avatar" />
              <span class="username">{{ comment.username }}</span>
              <div class="rating">
                <el-icon><Star /></el-icon>
                {{ comment.rating }}
              </div>
            </div>
            
            <div class="comment-content">{{ comment.content }}</div>
            
            <div class="comment-footer">
              <span class="purchase-time">购买时间：{{ comment.purchaseTime }}</span>
              <span class="comment-time">评论时间：{{ comment.commentTime }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 购物车组件 -->
    <ShoppingCartComponent
      ref="shoppingCartRef"
      v-model:visible="cartDrawerVisible"
    />
    <!-- 返回按钮 -->
    <el-button
      class="back-button"
      icon="ArrowLeft"
      @click="goBack"
      text
    >
      返回
    </el-button>
  </div>
</template>

<style scoped>
.product-detail {
  padding: 40px 0;
  background-color: #f5f5f5;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 商品展示区样式 */
.product-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  background: white;
  padding: 30px;
  border-radius: 8px;
  margin-bottom: 30px;
}

.product-images {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.main-image {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 8px;
}

.main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumbnail-list {
  display: flex;
  gap: 10px;
}

.thumbnail {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.thumbnail.active {
  border-color: #409EFF;
}

.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 商品信息样式 */
.product-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.product-name {
  font-size: 24px;
  font-weight: bold;
  margin: 0;
}

.product-brand {
  color: #666;
  margin: 0;
}

.product-price {
  display: flex;
  align-items: center;
  gap: 10px;
}

.current-price {
  font-size: 28px;
  color: #f56c6c;
  font-weight: bold;
}

.original-price {
  font-size: 16px;
  color: #999;
  text-decoration: line-through;
}

.product-rating {
  display: flex;
  align-items: center;
  gap: 20px;
  color: #666;
}

.rating .el-icon {
  color: #ff9900;
  margin-right: 4px;
}

.product-sizes {
  border-top: 1px solid #eee;
  padding-top: 20px;
}

.size-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.size-tag {
  cursor: pointer;
}

.product-actions {
  margin-top: auto;
}

/* 商品详情区样式 */
.product-details {
  background: white;
  padding: 30px;
  border-radius: 8px;
  margin-bottom: 30px;
}

.product-details h2 {
  margin: 0 0 20px;
  font-size: 20px;
}

.description {
  color: #666;
  line-height: 1.6;
}

.specifications {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.specifications li {
  display: flex;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.spec-label {
  width: 100px;
  color: #666;
}

/* 评论区样式 */
.comments-section {
  background: white;
  padding: 30px;
  border-radius: 8px;
}

.comment-input {
  margin-bottom: 30px;
}

.comment-input .el-button {
  margin-top: 10px;
}

.comment-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.comment-item {
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
}

.comment-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.username {
  font-weight: 500;
}

.comment-content {
  color: #333;
  line-height: 1.6;
  margin: 10px 0;
}

.comment-footer {
  display: flex;
  gap: 20px;
  color: #999;
  font-size: 14px;
}

/* 响应式样式 */
@media (max-width: 768px) {
  .product-showcase {
    grid-template-columns: 1fr;
  }
  
  .thumbnail {
    width: 60px;
    height: 60px;
  }
}
.back-button {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 100;
  font-size: 16px;
  padding: 10px 20px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.back-button:hover {
  background-color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}
</style>